import React, { Component } from "react";
import { StyleSheet ,FlatList} from "react-native";
import { Button, TouchableOpacity, Dialog, Text, View } from "react-native-ui-lib";
import { isIPhoneX } from "../../../configs/platform";
import { commonStyles } from "../../../configs/commonStyle";
import { Icon } from "../../components";
import ListSeparator from "../../common/ListSeparator";
import moment from "moment";

/**
 * 修改配送时间
 */
export default class ModifyDeliveryTimeDialog extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      data: {},
      content: "",
      showHeader: true,
      dataList:[],
      errorTips: null,
    };
  }

  show = (data) => {
    let start=moment().format('HH')

    let dataList=[];
    for(let i=Number(start)+1;i<24;i++)
    {
      dataList.push({startTime:i,endTime:i+1,isChecked:false})
    }
    this.setState({ isOpen: true, data,dataList });
  };

  dismiss = () => {

    this.setState({ isOpen: false });
  };

  renderHeader = props => {
    return (
      <View margin-10 row centerV>
        <View>
          <Icon type="AntDesign" name={"close"} size={16} color={"transparent"} />
        </View>
        <View margin-10 center flex>
          <Text style={{ ...commonStyles.text_black_16 }}>申请修改配送时间</Text>
        </View>
        <TouchableOpacity onPress={this.dismiss}>
          <Icon type="AntDesign" name={"close"} size={16} color={"#cccccc"} />
        </TouchableOpacity>
        <View height={1} bg-line />
      </View>
    );
  };

  render_item = ({ item, index }) => {
    const { dataList } = this.state;
    return (
      <TouchableOpacity activeOpacity={1} style={item?.isChecked ?styles.itemWrap_checked: styles.itemWrap}
                        onPress={() => {
                          if (item?.isChecked == false) {
                            const tempList = dataList.map((data, pos) => {
                              data["isChecked"] = index == pos;
                              return data;
                            });
                            this.setState({ dataList:tempList });
                          }
                        }}>
        {
          item?.startTime==23?
            <Text style={commonStyles.text_black}>{`${item?.startTime}:00 - `}{`23:59`}</Text>
            :
            <Text style={commonStyles.text_black}>{`${item?.startTime}:00 - `}{`${item?.endTime}:00`}</Text>
        }

      </TouchableOpacity>
    );
  };

  render() {
    const { isOpen, data,dataList,errorTips } = this.state;
    const timer= dataList.find(data=>data.isChecked==true)
    return (
      <Dialog
        migrate
        useSafeArea
        containerStyle={styles.roundedDialog}
        visible={isOpen}
        width={"70%"}
        onDismiss={this.dismiss}
        disablePan
        ignoreBackgroundPress
        renderPannableHeader={this.renderHeader}
      >
        <View padding-10>
          <Text style={commonStyles.text_black}>原配送时间：{data?.delySTime}-{data?.delyETime}</Text>
          <Text style={{...commonStyles.text_black,marginTop:10,marginBottom:5}}>调整时间：{IsNullOrEmpty(timer)?'请选择':`${timer?.startTime}:00 - ${timer?.endTime}:00`}</Text>
          <View style={{backgroundColor:'#f7f7f7',borderRadius:5, marginBottom: 5}}>
          <FlatList
            data={dataList}
            style={{ height:150}}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={{ flexGrow: 1 }}
            keyExtractor={(item, index) => "dateType_" + index}
            renderItem={this.render_item}
            ItemSeparatorComponent={() => <ListSeparator height={1} backgroundColor={"transparent"} />}
          />
          </View>
          {
            IsNullOrEmpty(errorTips)?null:
              <Text style={commonStyles.text_red_12}>{errorTips}</Text>
          }
        </View>
        <View row style={{ borderTopColor: "#eeeeee", borderTopWidth: 1 }}>
          <Button flex label={"确定"} background-white labelStyle={{ color: "#F9D63B" }} text14
                  onPress={() => {
                    if(IsNullOrEmpty(timer))
                    {
                      this.setState({errorTips:'请选择调整时间'})
                      return;
                    }
                    this.dismiss();
                    this.props.callBack && this.props.callBack(data,timer);
                  }}
          />
        </View>
      </Dialog>
    );
  }
}

const styles = StyleSheet.create({
  roundedDialog: {
    backgroundColor: "white",
    marginBottom: isIPhoneX ? 0 : 20,
    borderRadius: 4,
  },
  dropListView: {
    borderWidth: 1,
    borderColor: "#cccccc",
    borderRadius: 5,
    height: 35,
    flexDirection:'row',
    alignItems:'center',
    paddingHorizontal:10,
  },
  itemWrap: {
    padding: 10,
  },
  itemWrap_checked: {
    padding: 10,
    backgroundColor: "#FFD8CE",
  },
});


